import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate, Outlet } from 'react-router-dom'

import { Menu, message, Divider, Button, Popconfirm } from 'antd';


import styles from './index.module.css'

//持久化
import { setCache, getCache } from '../../utils/cache/'
import { userName_cache_key, mian_menu_key, mian_menu_sub_key } from '../../utils/cache/cacheKey'
//跳转工具类
import { jumpTo } from '../../utils/jump'
//网络请求
import { } from '../../utils/axiosRequest/api'
//左侧菜单栏数据
import { items } from '../../constant/leftMenuData'

function Mian() {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //导航
    let navigate = useNavigate()
    //useLocation
    const location = useLocation()
    // 如果没有state，将state设为一个空对象
    const state = location.state || {}
    //当前选中的key
    const [current, setCurrent] = useState('2');


    const onClick = (e) => {
        const key = e.key;
        const sub = e.keyPath[1];
        switch (key) {
            //推送情况
            case '1':
                selectKey(key, sub, '/main/pushState')
                break;

            //新增账号
            case '2':
                selectKey(key, sub, '/main/addUser')
                break;

            //编辑账号
            case '3':
                selectKey(key, sub, '/main/editUser')
                break;

            //案件查询
            case '8':
                selectKey(key, sub, '/main/queryCase')
                break;

            //最新案件
            case '4':
                selectKey(key, sub, '/main/caseStatus')
                break;

            default:
                messageApi.open({ type: 'error', content: '功能建设中' });
                break;
        }
    };

    //[]空数组相当于componentDidMount
    useEffect(() => {
        //初始化数据
        initData();
        //返回的函数相当于unmountComponentAtNode
        return () => {


        }
    }, []);

    function selectKey(key, sub, jumpPath) {
        setCache(mian_menu_key, key)
        setCache(mian_menu_sub_key, sub)
        jumpTo(navigate, jumpPath, true, null)
    }

    function initData() {

    }

    function confirm() {
        jumpTo(navigate, '/login', true, null)
    }

    function cancel() {

    }

    return (
        <div className={styles.container} >
            {contextHolder}
            <Menu className={styles.menu}
                onClick={onClick}
                theme="light"
                mode="inline"
                defaultOpenKeys={['sub1', 'sub2', 'sub3', 'sub4']}
                selectedKeys={[getCache(mian_menu_key)]}
                items={items}
            />
            <div className={styles.main}>
                <div className={styles.head}>
                    <Popconfirm
                        title="退出"
                        description="您确定要退出系统吗？"
                        onConfirm={confirm}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="关闭">
                        <Button className={styles.logout}>您好：{getCache(userName_cache_key)}</Button>
                    </Popconfirm>
                </div>
                <Divider></Divider>
                <Outlet></Outlet>
            </div>
        </div>
    )
}

export default Mian;
